<script setup lang="ts">
import DetailedCase from './detailedCase.vue';
import { CaseStatus } from '@/types/response/case';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { onMounted, reactive, Ref, ref } from 'vue';
import { CalendarOptions } from '@fullcalendar/core';
import { Calendar } from '@fullcalendar/core';
import { getMediatorCaseByDay, getMediatorCaseByMonthYear } from '@/axios/case/mediatorCase';
import { Case } from '@/types/response/case';
import useUserStore from '@/stores/userStore';
import { TimeUtil } from '@/utils/timeUtil';
let caseMap = ref(new Map<number, Map<number, Case[]>>())
let userStore = useUserStore()
let calendar: Calendar = null;
let calendarOptions: CalendarOptions = {
    dayMaxEvents: true,
    locale: "zh-cn",
    eventColor: '#378006',
    moreLinkContent: "详细",
    themeSystem: "bootstrap",
    customButtons: {
        prevMonthCustom: {
            text: '上月',
            click: function () {
                prevMonthCustomClick();
            }
        },
        nextMonthCustom: {
            text: '下月',
            click: function () {
                nextMonthCustomClick();
            }
        },
        todayCustom: {
            text: '今天',
            click: function () {
                todayCustomClick();
            }
        }
    },
    dateClick: (e) => {
        let beginTime=TimeUtil.toSimpleTimeString(e.date);
        dayCaseDialog.look()
        getMediatorCaseByDay(userStore.userId, beginTime).then(res => {
            dayCaseDialog.cases = res;
        })

    },
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    eventClick: (e) => {
        console.log(e)
    },
    headerToolbar: {
        right: 'prevMonthCustom,nextMonthCustom todayCustom',
    },
    events: [
    ],
    
}
onMounted(() => {
    let calendarEl: HTMLElement = document.getElementById('calendar')!;
    calendar = new Calendar(calendarEl, calendarOptions);
    calendar.render();
    renderByRequest(new Date().getFullYear(), new Date().getMonth() + 1);
})
function addCasesToMap(year: number, month: number, cases: Case[]) {
    let yearMap = caseMap.value.get(year)
    if (!yearMap) {
        caseMap.value.set(year, new Map<number, Case[]>())
        yearMap = caseMap.value.get(year)
    }
    yearMap.set(month, cases)
}
// 刷新Calendar的数据
function renderCalendarByCases(cases: Case[]) {
    // TODO：调用接口获取数据,这里定义为空数组
    let dateMap = new Map<string, number>();//指定月份有多少个数据
    cases.forEach(c => {
        if (c.mediationTime == null) return;
        let date = c.mediationTime.split(" ")[0];
        if (dateMap.get(date) == null) dateMap.set(date, 1);
        else dateMap.set(date, dateMap.get(date) + 1);
    })
    let events: { title: string, date: string }[] = [];
    dateMap.forEach((value, key) => {
        events.push({ title: value + "件案件", date: key })
    })
    calendar.setOption('events', events);
}
function renderByRequest(year:number,month:number){
    getMediatorCaseByMonthYear(userStore.userId, year, month).then(res => {
            addCasesToMap(year, month, res)
            renderCalendarByCases(res)
    })
}
// 上月点击
function prevMonthCustomClick() {
    calendar.prev();
    let preMonth = calendar.getDate().getMonth() + 1;//上个月
    let year = calendar.getDate().getFullYear();
    if (caseMap.value.get(year) == null || caseMap.value.get(year).get(preMonth) == null) {
        renderByRequest(year, preMonth)
    }
    else {
        renderCalendarByCases(caseMap.value.get(year).get(preMonth))
    }
}

// 下月点击
function nextMonthCustomClick() {
    calendar.next();
    let nextMonth = calendar.getDate().getMonth() + 1;//下个月
    let year = calendar.getDate().getFullYear();
    if (caseMap.value.get(year) == null || caseMap.value.get(year).get(nextMonth) == null) {
        renderByRequest(year,nextMonth);
    }
    else {
        renderCalendarByCases(caseMap.value.get(year).get(nextMonth))
    }
}

// 今日点击
function todayCustomClick() {
    calendar.today();
}
let detailedDialog: {
    visible: boolean,
    caseId: number,
    case: Case,
    look: (caseId: number, ca: Case) => void;
} = reactive({
    visible: false,
    caseId: null,
    case: null,
    look(caseId: number, ca: Case) {
        detailedDialog.visible = true;
        detailedDialog.caseId = caseId;
        detailedDialog.case = ca;
    }
})
let dayCaseDialog=reactive({
    visible:false,
    cases:[],
    look(){
        dayCaseDialog.visible=true;   
    }
})
</script>
<template>
    <div id="calendar" style="width: 400px;"></div>
    <el-dialog v-model="dayCaseDialog.visible" title="该天案件" >
        <el-table :data="dayCaseDialog.cases" :border="true" >
            <el-table-column label="案件编号" prop="caseId" width="100">
            </el-table-column>
            <el-table-column label="申请人" prop="applicant.name">
            </el-table-column>
            <el-table-column label="被申请人" prop="respondent.name">
            </el-table-column>
            <el-table-column label="调解时间" prop="respondent.name">
                <template #default="scope">
                    <span>{{ Case.getMediationTime(scope.row) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="调解状态">
                <template #default="scope">
                    <span>{{ CaseStatus.getCommentByStatus(scope.row.caseState) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-tooltip content="查看详细" placement="bottom" effect="dark">
                        <el-button round type="success" @click="detailedDialog.look(scope.row.caseId, scope.row)"
                            icon="view"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <DetailedCase v-model="detailedDialog.visible" :case="detailedDialog.case" :caseId="detailedDialog.caseId">
    </DetailedCase>
</template>
